<template>
  <div class="distributor-layout">
    <!-- 左侧导航菜单 -->
    <aside class="sidebar" :class="{ 'sidebar-collapsed': isCollapsed }">
      <div class="sidebar-header">
        <div class="sidebar-logo-icon">COK</div>
        <h3 v-if="!isCollapsed">经销商系统</h3>
        <button class="toggle-btn" @click="toggleSidebar">
          <i class="fas" :class="isCollapsed ? 'fa-angle-right' : 'fa-angle-left'"></i>
        </button>
      </div>

      <nav class="sidebar-nav">
        <router-link
          v-for="item in navItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
          :class="{ active: currentPath === item.path }"
        >
          <i class="fas" :class="item.icon"></i>
          <span v-if="!isCollapsed">{{ item.title }}</span>
          <div v-if="currentPath === item.path" class="active-indicator"></div>
        </router-link>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'main-expanded': isCollapsed }">
      <!-- 顶部标题栏 -->
      <header class="header">
        <div class="breadcrumb">
          <h2>{{ pageTitle }}</h2>
          <div class="breadcrumb-items">
            <span>经销商</span>
            <i class="fas fa-chevron-right"></i>
            <span>{{ pageTitle }}</span>
          </div>
        </div>

        <div class="header-actions">
          <div class="notification">
            <i class="fas fa-bell"></i>
            <span class="badge">3</span>
          </div>

          <div class="user-profile">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="avatar" />
<!--            <div class="user-info" v-if="!isCollapsed">-->
<!--              <span class="user-name">张三</span>-->
<!--              <span class="user-role">分销商</span>-->
<!--            </div>-->
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <main class="content">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 侧边栏是否折叠
const isCollapsed = ref(false)

// 导航菜单项
const navItems = [
  { title: '控制台', path: '/distributor/dashboard', icon: 'fa-chart-pie' },
  { title: '产品管理', path: '/distributor/products', icon: 'fa-box-open' },
  { title: '代付链接', path: '/distributor/payment-links', icon: 'fa-link' },
  { title: '订单管理', path: '/distributor/orders', icon: 'fa-shopping-cart' },
  { title: '佣金管理', path: '/distributor/commissions', icon: 'fa-money-bill-wave' },
  { title: '账户设置', path: '/distributor/account', icon: 'fa-user-cog' },
  { title: '打粉管理', path: '/distributor/fans', icon: 'fa-chart-pie' },
]

// 切换侧边栏展开/折叠状态
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
  // 保存到本地存储，使刷新页面后保持状态
  localStorage.setItem('distributorSidebarCollapsed', isCollapsed.value.toString())
}

// 获取当前路由
const route = useRoute()
const currentPath = computed(() => route.path)

// 获取当前页面标题
const pageTitle = computed(() => {
  const current = navItems.find(item => currentPath.value.includes(item.path))
  return current ? current.title : '经销商系统'
})

// 从本地存储中恢复侧边栏状态
onMounted(() => {
  const savedState = localStorage.getItem('distributorSidebarCollapsed')
  if (savedState) {
    isCollapsed.value = savedState === 'true'
  }
})

// 监听路由变化，在移动设备上自动折叠侧边栏
watch(currentPath, () => {
  if (window.innerWidth < 768) {
    isCollapsed.value = true
  }
})
</script>

<style scoped lang="scss">
.distributor-layout {
  display: flex;
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 侧边栏样式
.sidebar {
  width: 240px;
  background-color: #F5F7FA;
  color: #3F4254;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
  border-right: 1px solid #E4E6EF;

  &-collapsed {
    width: 70px;
  }

  &-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #E4E6EF;
    height: 70px;

    .sidebar-logo-icon {
      min-width: 36px;
      height: 36px;
      margin-right: 12px;
      background-color: #1890ff;
      color: white;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
    }

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      white-space: nowrap;
    }

    .toggle-btn {
      background: none;
      border: none;
      color: #3F4254;
      cursor: pointer;
      width: 24px;
      height: 24px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }
  }

  &-nav {
    padding: 16px 0;
    flex: 1;
    overflow-y: auto;

    .nav-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      color: #3F4254;
      text-decoration: none;
      position: relative;
      margin-bottom: 4px;
      transition: all 0.2s ease;

      i {
        min-width: 24px;
        font-size: 18px;
        text-align: center;
        margin-right: 12px;
      }

      span {
        white-space: nowrap;
      }

      &:hover {
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
      }

      &.active {
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);

        .active-indicator {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4px;
          background-color: #1890ff;
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }
}

// 主内容区域样式
.main-content {
  flex: 1;
  margin-left: 240px;
  transition: all 0.3s ease;

  &.main-expanded {
    margin-left: 70px;
  }
}

// 顶部标题栏样式
.header {
  height: 70px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .breadcrumb {
    h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 0 0 4px 0;
      color: #2F3542;
    }

    &-items {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #6C757D;

      i {
        margin: 0 8px;
        font-size: 12px;
      }
    }
  }

  &-actions {
    display: flex;
    align-items: center;

    .notification {
      position: relative;
      margin-right: 24px;
      cursor: pointer;

      i {
        font-size: 20px;
        color: #6C757D;
      }

      .badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: #FF4757;
        color: #fff;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
      }
    }

    .user-profile {
      display: flex;
      align-items: center;
      cursor: pointer;

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
      }

      .user-info {
        display: flex;
        flex-direction: column;

        .user-name {
          font-weight: 600;
          font-size: 14px;
          color: #2F3542;
        }

        .user-role {
          font-size: 12px;
          color: #6C757D;
        }
      }
    }
  }
}

// 内容区域样式
.content {
  padding: 24px;
  min-height: calc(100vh - 70px);
}

// 响应式设计
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);

    &-collapsed {
      transform: translateX(0);
      width: 70px;
    }
  }

  .main-content {
    margin-left: 0;

    &.main-expanded {
      margin-left: 70px;
    }
  }
}
</style>
